<div class="option-change-container">
  <div nz-row *ngIf="type === 'option' || type === 'tab'">
    <div class="option-change-box" *ngFor="let val of _value; let index = index">
      <div nz-col nzSpan="6">
        <input type="text" [(ngModel)]="val.label" nz-input placeholder="名称">
      </div>
      <div nz-col nzSpan="6">
        <input type="text" [(ngModel)]="val.value" nz-input placeholder="值">
      </div>
      <div nz-col nzSpan="6">
        <input type="text" [(ngModel)]="val.tooltip" nz-input placeholder="tooltip提示(HTML)">
      </div>
      <div nz-col nzSpan="6">
        <div class="option-delete-box" (click)="handleDelete(index)">
          <i nz-icon nzType="delete"></i>
        </div>
      </div>
    </div>
    <div nz-col nzSpan="24">
      <a (click)="handleAdd()">添加</a>
    </div>
  </div>
  <div nz-row *ngIf="type === 'rules'">
    <div class="option-change-box option-change-specil" *ngFor="let val of _value; let index = index">
      <ng-container *ngIf="index !== 0">
        <label>
          <div nz-col nzSpan="18">
            <input type="text" [(ngModel)]="val.message" nz-input placeholder="提示信息">
          </div>
          <div nz-col nzSpan="18">
            <input type="text" [(ngModel)]="val.pattern" nz-input placeholder="正则表达式pattern">
          </div>
        </label>
        <div nz-col nzSpan="6">
          <div class="option-delete-box" (click)="handleDelete(index)">
            <i nz-icon nzType="delete"></i>
          </div>
        </div>
      </ng-container>
    </div>
    <div nz-col nzSpan="24">
      <a (click)="handleAddRules()">增加校验</a>
    </div>
  </div>
  <div *ngIf="type === 'colspan'">
    <div nz-row class="option-change-box" *ngFor="let val of _value; let index = index">
      <div nz-col nzSpan="18">
        <nz-input-number [(ngModel)]="val.span" style="width: 100%;" [nzMax]="24"
          [nzPlaceHolder]="'名称'"></nz-input-number>
      </div>
      <div nz-col nzSpan="6">
        <div class="option-delete-box" (click)="handleDelete(index)">
          <i nz-icon nzType="delete"></i>
        </div>
      </div>
    </div>
    <div nz-row>
      <div nz-col nzSpan="24">
        <span (click)="handleAddCol()">添加</span>
      </div>
    </div>
  </div>
  <div *ngIf="type === 'collapse'">
    <div class="option-change-box" *ngFor="let val of _value; let index = index">
      <div nz-col nzSpan="9">
        <input type="text" [(ngModel)]="val.label" nz-input placeholder="名称1">
      </div>
      <div nz-col nzSpan="6">
        <div class="option-delete-box" (click)="handleDelete(index)">
          <i nz-icon nzType="delete"></i>
        </div>
      </div>
    </div>
    <div nz-col nzSpan="24">
      <a (click)="handleAdd()">添加</a>
    </div>
  </div>
  <!--     
  <a-row v-if="type === 'option' || type === 'tab'" :gutter="8">
    <div class="option-change-box" v-for="(val, index) in value" :key="index">
      <a-col :span="9"
        ><a-input v-model="val.label" placeholder="名称"
      /></a-col>
      <a-col :span="9"><a-input v-model="val.value" placeholder="值"/></a-col>
      <a-col :span="6"
        ><div @click="handleDelete(index)" class="option-delete-box">
          <a-icon type="delete" /></div
      ></a-col>
    </div>
    <a-col :span="24"><a @click="handleAdd">添加</a></a-col>
  </a-row>
  <a-row v-if="type === 'rules'" :gutter="8">
    <span v-for="(val, index) in value" :key="index">
      <div class="option-change-box" v-if="index !== 0">
        <a-col :span="18"
          ><a-input v-model="val.message" placeholder="提示信息"
        /></a-col>
        <a-col :span="18"
          ><a-input v-model="val.pattern" placeholder="正则表达式pattern"
        /></a-col>
        <a-col :span="6"
          ><div @click="handleDelete(index)" class="option-delete-box">
            <a-icon type="delete" /></div
        ></a-col>
      </div>
    </span>
    <a-col :span="24"><a @click="handleAddRules">增加校验</a></a-col>
  </a-row>
  <a-row v-else-if="type === 'colspan'" :gutter="8">
    <div class="option-change-box" v-for="(val, index) in value" :key="index">
      <a-col :span="18"
        ><a-input-number
          style="width:100%"
          :max="24"
          v-model="val.span"
          placeholder="名称"
      /></a-col>
      <a-col :span="6"
        ><div @click="handleDelete(index)" class="option-delete-box">
          <a-icon type="delete" /></div
      ></a-col>
    </div>
    <a-col :span="24"><a @click="handleAddCol">添加</a></a-col>
  </a-row> -->
</div>